import React, {FC, useContext, useMemo} from 'react';
import "./JournalArticleShare.less";
import {QRCode, Typography} from "antd";
import * as API from "@/services";
import {HxConfigContext} from "@/layouts/HxConfigContext";
import {getArticleQuoteArr} from "@/pages/JournalPage/JournalDetail/commons/utils";
import useJournalArticleHelp from "@/pages/JournalPage/JournalDetail/commons/useJournalArticleHelp";

interface JournalArticleShareProps {
  article?: API.FrontArticle;
}

const JournalArticleShare: FC<JournalArticleShareProps> = (props) => {
  const {article} = props;
  const {articleQuote, shareUrl} = useJournalArticleHelp(article);

  return (
    <div className={"hx-article-share"}>
      <h4>微信扫一扫</h4>
      <div>
        <QRCode size={100}
                color={"#000"}
                bgColor={"#FFF"}
                bordered={false}
                iconSize={25}
                icon="/qrcode_icon.png"
                value={shareUrl}/>
      </div>
      <div className={"share-copy"}>
        <Typography.Text copyable={{
          text: articleQuote + "\n" + shareUrl,
          icon: "复制链接"
        }}/>
      </div>
    </div>
  );
};

export default JournalArticleShare;
